<html>
    <head>
        <title>Vue组件</title>
    </head>
    <body>
        <script>
            /*
                一、component 

                          渲染一个“元组件”为动态组件。  

                          依 is 的值，来决定哪个组件被渲染。详见 ：https://v2.cn.vuejs.org/v2/api/#component


                          1、属性 ：

                                ①、 is  - string | ComponentDefinition | ComponentConstructor

                                ②、inline-template - boolean

                          2、用法：

                                渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。


                                eg:

                                        <!-- 动态组件由 vm 实例的 `componentId` property 控制 --
                                        <component :is="componentId"></component>

                                        <!-- 也能够渲染注册过的组件或 prop 传入的组件 --
                                        <component :is="$options.components.child"></component>

                         3、平台兼容性

                                    App	                            HarmonyOS Next	    H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                                    √ (Vue2 需传入 String 类型)	    HBuilderX 4.24	      √	    x	        x	        x	        x	                    x	        x	x	        x	        x


            */

            /*
                 二、transition

                            <transition> 元素作为单个元素/组件的过渡效果。  

                            <transition> 只会把过渡效果应用到期包裹的内容上，而不会额外渲染DOM元素，也不会出现在可被检查的组件层级中。
                                
                                
                            ★、平台差异性说明

                                App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                                x	√	x	        x	            x	        x	                x	        x	    x	        x	        x
            */

            /*
                 三、template

                        uni-app 支持在 template 模板中嵌套 <template/> 和 <block/>，用来进行 条件渲染 和 列表渲染。

                        <template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

                        <block/> 在不同的平台表现存在一定差异，推荐统一使用 <template/>。


                       ★、平台兼容性

                                App	        HarmonyOS Next	    H5	    微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                                √	        HBuilderX 4.24	    √	        √	    √	            √	        √	                √	        √	    √	        √	        √

                        
                        ★、代码示例

                                <template>
                                    <view>
                                        <template v-if="test">
                                            <view>test 为 true 时显示</view>
                                        </template>
                                        <template v-else>
                                            <view>test 为 false 时显示</view>
                                        </template>
                                    </view>
                                </template>
                                <、script>
                                    export default {
                                        data() {
                                            return {
                                                test:true
                                            }
                                        }
                                    }
                                </、script>
            */

            /*
                 四、transition-group

                            <transition-group> 元素作为多个元素/组件的过渡效果。
                                
                            <transition-group> 渲染一个真实的 DOM 元素。
                                    
                            默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。详见 ：https://v2.cn.vuejs.org/v2/api/#transition-group


                            ★、平台兼容性

                                    App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                                    x	√	x	        x	            x	        x	                x	        x	    x	        x	        x
            */


            /*
                 五、keep-alive

                            <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

                             和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
                                
                            详见：  https://v2.cn.vuejs.org/v2/api/#keep-alive  


                            ★、平台兼容性

                                    App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                                    x	√	x	            x	            x	        x	            x	        x	    x	        x	        x
            */

            /*
                六、slot
                                
                           <slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。插槽。

                            详细用法，请参考下面教程的链接。通过插槽分发内容

                            平台差异说明

                            App	HarmonyOS Next	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快应用	360小程序	快手小程序	京东小程序
                            √	HBuilderX 4.24	√	√	√	√	√	√	√	√	√	√
            */
        </script>
    </body>
</html>